查看原文
其他

如何实现博物馆网站的无障碍性?这10个做法供你参考

湖南省博物馆编译 弘博网 2023-10-07


如何提高网站的无障碍性(accessibility),使其符合《网络内容无障碍指南》(WCAG)?本文介绍了提高网站无障碍性的10个重要领域。WCAG是一系列旨在明确规定网络无障碍性的规范和途径。在这个背景下,“无障碍”意味着用户可以通过辅助技术(如屏幕阅读器、缩放或屏幕放大镜、语音听写等)正常访问网站,因为这样搭建出来的网站为所有访问者(包括残障人士)提供了公平的体验。



以下建议可以极大地提高网站的无障碍性,但需要注意的是,这些并不是实现该目的的唯一途径。在内容、设计和编码方面,还有其他一些本文或WCAG没有涉及但效果良好的途径。在为所有人创造一个公平和愉快的网站体验方面,这些途径同样重要。以下建议并非面面俱到,但可以帮助博物馆在创建包容性在线产品方面取得长足进步。


由于整个博物馆的决策会影响到无障碍性和包容性,因此不同领域的实践者都应该参考这个建议。网站管理员、设计师、开发人员、内容创建者、第三方机构以及上述任何一个领域的管理人员等人士或机构都可能从中获益。


在我们展开探讨这些建议之前,首先要注意到一种叫做“无障碍覆盖”(an accessibility overlay)的产品。这类覆盖产品通常宣称通过使用一个JavaScript插件就能自动实现符合无障碍性的要求,以这种虚假承诺向网站所有者出售。无论此类产品标价多少,都请不要考虑此类产品,因为它们往往弊大于利。莱尼·芬戈德(Lainey Feingold)是目前在无障碍性领域最优秀的律师,他写过一篇文章,很好地解释了为什么无障碍覆盖类的产品没有用,甚至不能保护你免受诉讼。


01为图像撰写替代文本


“Alt文本”是“替代文本”(alternative text)的简称,这是一种HTML属性,可以在其中为因各种原因而无法看到图像的人提供图像的文字描述。博物馆网站,例如馆藏场所,活动相片和美术馆图像相关的网页,都需要在网站上设有无障碍阅读的可视化描述。


要精准地概括博物馆的可视化描述的相关做法,应参考《库珀·休伊特指南》(the Cooper Hewitt guidelines),此外,这篇关于可视化描述做法的过程和语境化的文章也是一篇十分有用的资源。


要特别注意的是,并非所有图像都可算作有意义的内容并需要对其进行可视化描述。这一点针对用作链接,按钮或其他交互式控件的图像来说尤其适用。在这样的功能性用途中,替代文字必须改为简洁且准确的标签。例如,如果您使用餐厅菜单的图片作为咖啡厅的图标,则几乎可以肯定该图片的替代文字是“咖啡厅菜单”,而不是诸如“皮面餐厅菜单本,上有风格化的手写字体”之类的描述性文字。



案例:在图像上层显示替代文字


02文本中划分标题层次


如果使用得当,标题样式将发挥巨大的作用。标题层次不仅仅面向是那些使用辅助技术的人,而是向每个人都传达了网页内容的信息层次。但是,为了增强标题的无障碍性,不仅要在视觉上对内容通过用颜色、强调和大小等方式加以区分,而且还要在页面的代码中区分开来。要做到这一点,则需要用到HTML中的标题标签。标题级别从“一级“”(<h1>)到“六级”(<h6>),其中“一级”是最普通的级别,“六级”是最特殊的级别。换句话说,如果把此想作一本书,书名将是一级标题,每章的标题将是二级标题,章节内的小节标题将是三级标题,而这些小节内的小标题将是四级标题。在博物馆的网站上,一个信息页面可能会有一个一级标题,比如 "前来参观",二级标题是 "门票信息"、"交通路线"、"常见问题解答 "等等。


使用以上这样恰如其分的标题对于使用屏幕阅读器的用户来说至关重要,这能令用户高效地浏览网站,因为屏幕阅读器会提供快速扫描给定页面的选项,以供用户选择要阅读的部分。这就相当于浏览网页,跳过不感兴趣的区域,专注于重要的内容。视力正常的用户可以透过不同样式表现出来的视觉层次,快速浏览网页,并在不同的视觉区域中浏览操作,从而轻松实现这一功能。如果标题编码正确,屏幕阅读器用户也可以进行同样的操作。


03为视频添加字幕、文本转录和描述


针对视频等基于时间的媒体,在给出具体建议之前,我们必须先明确一些定义。以下定义取自Mozaic包容性设计词汇表(Mozaic Inclusive Design Glossary)。


手语手语是使用视觉或手势来表达意义的语言。通过手势与非手势元素相结合,手语可以传达意义。美国聋人社区的官方工作语言是美国手语(ASL)。与其他语言相比,这种语言在全美聋人协会(National Association of the Deaf)及其活动中具有同等地位并有优先权。


译后字幕译后字幕是为观众提供的一种翻译服务,当受众语言与媒体的语言不同时,就会提供译后字幕。例如,如果一个视频的音轨是德语的,那么屏幕上应该出现英文字幕,供英语使用者使用。译后字幕不是音频说明,理解这一点非常重要。除了使用翻译过的、与原音轨不同的语言,译后字幕并不针对外界声音、音乐等非语音音频。


字幕字幕是正在说的内容以及任何非语音音频的实时文字表述。如果在视频出现英语或出现任何声音,英语单词将作为音频的文字替代出现。要明白音频说明并非译后字幕。字幕的语言与视频音频原语言相同。


封闭式字幕封闭式字幕是指不刻录到视频中的字幕形式。这意味着字幕以数字形式存储在文本中,或者作为独立于媒体源的单独文件,或者作为容器格式的一部分。这种字幕更受欢迎,因为可以通过屏幕阅读器阅读出来——想想聋哑人通过盲文阅读字幕的情景。


开放式字幕开放式字幕是刻录到视频中的字幕。这种字幕并不是作为文本存储,而是作为构成视频每一帧图像的一部分。在大多数情况下,这种字幕并不是首选(请参见 "封闭式字幕"),但有时却是必要的——比如在公共环境中,使用不支持封闭式字幕的简单视频播放设备播放视频时。


转录文本转录文本即通过静态文本的形式来呈现源媒体。如果有一个媒体以时间为标准,可将该媒体所有字幕连为篇章,将其视作该媒体的转录文本,这样既方便又准确。转录文本是静态文本,因此可以以独立于源媒体的速度播放。


音频描述音频描述是一个额外的音轨,通常也被称为其他语言音轨。正如字幕与源媒体的语言相同一样,音频描述也是如此。音频描述是通过叙述来描述源媒体的视觉画面。音频描述的风格和数量在很大程度上取决于媒体源的内容。


音频回避音频描述通常通过音频回避的方式来实现,这是一种简单的声学处理方式,几乎在所有音频编辑软件中都可以轻松实现。音频回避是指降低但不消除源音频,以源媒体音量播放音频描述轨道。源媒体的音频在描述图像的旁白下音量减弱,“回避”旁白,因此这个技术被称为音频回避。


建议所有视频都必须有音频说明和转录文本。但是,正如上面的定义所表明的那样,音频说明与译后字幕不同,音频说明同时提供了话语和非话语音频的文字表述。了解两者的区别是很重要的。


大多数视频还必须带有音频描述。有时,尽管视频的内容可能已经通过音频得到了充分的描述,比如一个简单的“头部特写”镜头,访问者可以通过页面上视频周围的信息来判断谁在说话。但即使在这些情况下,音频描述通常也是很重要的,因为说话的人可能会有突出的面部表情或其他肢体语言,这些都是需要传达给视障观众的。

美国手语是一个出色的功能,因为它给使用者带来了真正的包容性体验。英语并不是这些美国手语使用者的主要语言,美国手语才是,这一点要牢记在心。所以,就像为讲西班牙语的听众提供西班牙语内容一样,也应该向听众提供美国手语的内容,以这种形式平等接纳和照顾听障人士。


04注意颜色和对比度


因为不是每个人都能感知颜色,所以绝不能仅仅通过颜色来传递信息。例如,如果表单上的错误信息在用户没有提供所有提示信息的情况下,以红色显示缺失的字段,那么颜色的改变必须伴随着非颜色的形式来表达同样的信息,比如文字信息。想一想网站上涉及电子邮件注册之类的表单,这些是否都能以这种更具包容性的方式传达填写错误的信息?也可以考虑使用任何其他的图形或图表。如果没有感知颜色的能力,是否一样可以理解任何此类信息图中的信息?


颜色之间的对比也是促进无障碍体验的一个重要方面。例如,在黑色背景上阅读灰色小字就十分困难。如果网站的访问者视力较差,或有色盲,那么这种影响就会被放大。为了解决这个问题,WCAG规定了一个颜色对比度要求:小文本必须有4.5:1的对比度,大文本必须至少是3:1。有些工具是可以测量并报告这些数字的。不过重要的是,要确保这种工具是做的是基于像素的分析,否则报告的数值会不准确。


也可以在任意页面上安装并运行Wave浏览器扩展,尽管这个拓展程序并不基于像素进行分析,但对于初步检查还是十分有用的。以Instagram上的一个页面为例,我们可以看到该扩展程序报告了24处颜色对比度不符合规定的地方。如果要进行基于像素的颜色对比度问题分析,谷歌浏览器插件颜色对比度分析器 (Color Contrast Analyzer)是一个可以派上用场的浏览器扩展程序。



案例:色彩对比度较小的页面


案例:在页面上运行WAVE并显示出色彩对比度不符合要求的地方


深入研究这类问题的另一个方法是在手机或笔记本电脑的设置中启用 "高对比度模式",然后访问想要测评的页面。浏览后再反问自己:是否还能完全理解网页呈现的内容?


选择颜色时就要仔细考虑对比度的潜在影响,而不是事后再检查,这可以有效避免日后为了补救而付出高昂的代价,或者修正的地方过于明显。许多组织把这一点纳入品牌风格设计开发的指南中,这令他们受益匪浅。


05控制好标签


想象一下,在你的页面上有一个右向箭头的按钮。对于视力正常的观众来说,可能很清楚这个按钮的作用,但是对于屏幕阅读器用户以及许多其他用户来说,要在代码中加入明确的标签才可以理解它的含义,比如“下一页”。这种被称为 "程序化标签 "(programmatic labeling)的东西非常重要,因为如果没有这种标签,辅助技术用户可能不知道网站上的各种控件是做什么的。想象一下,在一个表格上,你花了很多时间填写信息,然后到了最后有两个按钮,上面写着 "保存 "和 "取消"。如果这两个按钮没有无障碍标签,而又有一位看不到它们的人,这位用户怎么才能知道该激活哪一个呢?这种不必要的挫折感完全可以避免,我们只需在代码中遵循正确的标签做法就可以做到。尽管本文建议使用标题属性,但关键时候不使用标题属性也很重要。


无论网络和辅助技术是否支持隐形或程序化标签,任何设计系统的目标都应该是以一种可见的、永久的方式将标签信息显现出来,从而为每个人提供更加包容的体验。


另一个需要考虑的问题是如何令标签对每位用户都可见,并一直显示。例如,在带有 "姓名 "和 "邮政编码"等标签的表格中,有些不可访问式设计通常使用占位符,也就是说在输入框空白时标签出现在输入框中,而开始输入后消失。与其这样,不如让标签一直显示出来。想象一下,一个网站的输入栏上有一个占位符标签。如果用户已经开始输入,但随后在填写表格时分心或被打断,那么就很难知道那个输入字段在需要填入什么信息。有许多方法可以在不对设计产生负面影响的情况下实现这一点。


案例:因为在输入框中使用占位符而不再显示标签


06让网站显示适应不同比例的缩放


为了便于访问,网站至少要在放大到200%时也可以正常使用。自适应设计则可以很好地解决这个问题,此时页面元素会根据浏览器窗口的大小和形状进行移动和缩放以适应页面。需要密切注意的一点是,基于文本的缩放(图像不放大)和视觉缩放(所有内容都被放大)之间是有区别的。要确保网站在这两种缩放,尤其是基于文本的缩放下,用户都能正常使用,这一点非常重要,因为这也是许多网站布局和设计容易出现问题的地方。


案例:使用基于文本的缩放而导致页面无法使用


07使控件无需鼠标即可使用


在一个无障碍网站上,用户必须能够在不使用鼠标的情况下实现所有的互动控制(例如,通过键盘浏览操作)。此外,必须有一个清晰可见的指示,表明用户当前的"注视点"(point of regard),即页面上他们所关注的位置。例如,这个指示可以是一个出现在导航菜单中的项目周围的轮廓线,告诉用户当前选中的是哪一个。请注意,出于对设计的让步,可以令选中的轮廓线或下划线只在按下tab键和shift+tab键时才会出现。这样就可以为使用键盘导航的用户提供明显的选中框,而避免影响鼠标用户的风格设计。


案例:使用了清晰可见的选中框


08明确地描述链接并通过样式突出显示链接


当超链接出现在段落中间的文本中时,文本必须准确描述链接的去向。例如,“夏季时间表”就是不错的链接文本,因为这是描述性的,不需要有上下文解释,而 "点击这里 "或 "阅读更多 "这样的文本却收效甚微,因为用户只能通过点进链接确定其含义。


另外,确保链接在视觉上有清晰的指示也很重要。有一个简单的方法,这个方法从网络诞生之初就已经存在,那就是遵循既定的做法,在作为链接的文本下增加下划线,而不因设计原因而禁用这种样式。有一些方法可以改进链接样式,使其既美观又便于使用。


09在代码中指定页面语言


为了使屏幕阅读器能够输出适当的语音和盲文,开发人员必须在代码中指定页面的语言,如果有任何组成段落或短语部分的语言与页面其他文本语言不同,那么也要指定这些部分的语言。听到语音阅读与语音合成器所设置语言不同的文本,会让人感到非常沮丧。这就是开发人员在页面上漏掉几个字符代码的后果。这是十分容易做到的事情,但当这段代码被遗漏时,结果可能是用户完全无法理解页面上的所有内容。


10验证代码


开发者必须使用HTML5和ARIA识别验证器,根据W3C的HTML5和WAI-ARIA规范验证所有标记。这一点非常重要,因为即使已经注意使用了适当的无障碍属性,但如果代码中存在解析或其他问题,使页面无法按照预期的方式呈现,那么这些属性的作用仍然很小,甚至没有作用。


可以把这个验证器看作是网站的拼写和语法检查器。它不会捕捉到大多数语义错误,也就是说,如果你用错了一个词时,它可能无法识别出来,但至少可以确保代码没有语法错误(也就是它至少可以保证拼写都是正确的)。验证是必要的,但绝不是确保无障碍性的充分条件。

结论


虽然上述最佳做法对于使用辅助技术浏览网站的用户来说是必不可少的,但受益的绝不止这些用户。例如,移动端用户可以在不使用鼠标的情况下放大页面并浏览页面,同样也得以受益。合理使用标题对于建立良好的信息层次结构至关重要,而不仅仅是便于屏幕阅读器用户访问网站。解决无障碍性的问题,除了在操作和包容性方面有好处外,还能提高搜索引擎优化(SEO)的效果。通过有意采取一些措施来改善网站的无障碍性,对所有访问者来说,线上业务的实用性和表现都将得到改善。


虽然上述建议不能面面俱到,但各种规模的文化组织只要稍加努力,这些都是完全可以实现的。作为公众信任的机构,博物馆有承担这项工作的道德使命。


我希望以上内容能切实可行并行之有效。作为一个屏幕阅读器用户,我也迫不及待地想探索无障碍性更强、更具包容性的网站。预先感谢大家为建设一个更具包容性的网络世界所做出的努力。


作者简介:

作为包容性设计公司Prime Access Consulting (PAC)的创始人,西奈·巴赫拉姆(Sina Bahram)是一位无障碍方面的顾问、计算机科学家、研究员、演讲者和企业家。在西奈的指导下,PAC已经帮助一百多个组织实现并超越了他们的包容性目标,从创建无障碍网站和移动应用程序到实现整个企业全面包容性的设计方法。除了在企业、非营利机构和研究机构的各种董事会、会议、委员会和工作组中任职并担任主席外,西奈还担任万维网联盟(W3C)无障碍丰富互联网应用(ARIA)工作组的特邀专家,帮助制定下一代数字化无障碍标准和最佳做法。


来源:湖南省博物馆编译

翻译:杜静雅 译自美国博物馆联盟网站

回顾往期精彩

博物馆里过大年,一种不断演变的新年俗

西安咸阳机场扩建工程工地发现3500余座古墓 网友惊叹:秒变考古现场!

希腊第一座完全数字化的博物馆,让你春节在家也能实现“跨国游”!

河南春晚《唐宫夜宴》出圈,网友直呼这个假期要去博物馆!

玩益智游戏、览数字资源,宅家开心过大年!

味览江西,看江博这道特色风味如何点燃你的味蕾

穿越时空,寻汉觅宋——宜宾市博物院新馆首展今日开幕!

助力近300件海外文物数字化回归,国宝全球数字博物馆微信小程序上线

春节假期,国家博物馆又为观众带来两大新展!

新展丨走进成博“列备五都”展,看秦汉之际的城市风貌

廿载金沙 | 春节期间一馆六展还不够?金沙遗址2021年文化大餐来了!

点击在看,关注行业最新资讯

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存